// 表单元素处理
export const FormParser = (options, $this) => {
  const onChange = options?.onChange
  options.onChange = (value, ...args) => {
    $this.val(value)
    // $this.trigger('input', value); // 不生效

    // v-model只是一种语法糖，底层的方法还是去监听input事件。所以可以使用dispatchEvent事件给元素分配一个input事件，这样可以手动触发 inputElement 的 input 事件，同时可以触发 v-model 机制。IE 好像不支持（但可以 polyfill）。
    $this[0].dispatchEvent(new Event('input'))

    // 如果v-model有lazy修饰符的时候，触发得是change事件
    $this[0].dispatchEvent(new Event('change'))
    onChange?.(value, ...args)
  }
  return options
}

// 生成插件
export const WarpUmd = (RC, { name: pluginName, parser: parseProps }, propsDefines = {}) => {
  const ReactDOMRender = ({ container, ...props }) => {
    window.ReactDOM.render(<RC {...props} />, container)
  }

  if (window.jQuery) {
    // 动态注册 jQuery 插件
    window.jQuery.fn[pluginName] = function (props) {
      const $this = window.$(this)
      console.log('$this', $this)

      // 防止再次 render
      if ($this.mounted) {
        return
      }
      $this.mounted = true

      let container
      console.log('$this[0].tagName:', $this[0].tagName)
      const formElements = ['INPUT', 'TEXTAREA']
      if (formElements.includes($this[0].tagName)) {
        container = document.createElement('div')
        container.style.cssText = `
          display: inline-block;
        `
        $this.attr('hidden', true)
        const value = props.value || $this.data('value') || $this.attr('value')
        $this.val(value)
        $this.after(container)
      } else if ($this[0].tagName === 'DIV') {
        container = $this[0]
      }

      let options = {}
      for (const key in propsDefines) {
        const item = key.toLocaleLowerCase() // 属性key
        let propValues // 属性value
        // 当插件载体标签为 `input` 或者 `textarea` 时，不会接受 `name` 属性，而是接受 `data-name`，因为 `name` 是表单元素的关键字；
        if (formElements.includes($this[0].tagName) && item === 'name') {
          propValues = $this.data(item)
        } else {
          propValues = ($this.data(item) ? $this.data(item) : $this.attr(item)) || null
        }
        if (propValues || propValues === 0) {
          if (item === 'style') {
            options[key] = {}
            propValues = propValues.replace(/ |px/g, '')
            propValues = propValues.split(';')
            propValues.forEach((item) => {
              item = item.split(':')
              if (!item[0]) return
              options[key][item[0]] = Number(item[1])
            })
          } else {
            options[key] = propValues
          }
        }
      }

      options = {
        ...options,
        ...props
      }
      console.log(`${$this.selector} options:`, options)

      options = parseProps?.(options, $this) || options

      if (container) {
        ReactDOMRender({ container, ...options })
      }
    }
    window[pluginName] = ReactDOMRender
  }
  return ReactDOMRender
}
